<template>
    <ex-dialog
      width="800px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" >
            <el-form-item label="APP/微信小程序：">
                <el-switch v-model="ruleForm.sellStatus" active-value="2" inactive-value="1" active-text="上架" inactive-text="下架"> </el-switch>
            </el-form-item>
            <el-form-item label="抖音小程序：">
                <el-switch v-model="ruleForm.douyinSellStatus" active-value="2" inactive-value="1" active-text="上架" inactive-text="下架"> </el-switch>
            </el-form-item>
        </el-form>
        <div class="button_box">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')" >确认</el-button>
        </div>
      </div>
        
    </ex-dialog>
  </template>
  <script>
  // api
  import {
    editStatus
  } from "@/api/merchantsNFR/yeCard";
  export default {
    props: {
      visible: Boolean,
      id: Array,
      isBatch: Boolean, //是否批量上传
      listItem: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
        title: "操作上下架",
        loading: false,
        AgreeLoading: false,
        ruleForm: {
            sellStatus: '1',
            douyinSellStatus: '1',
            merchantEquityIdList:[],
        },
        rules: {
        //   sellStatus: [{required: true,message: "请选择",trigger: 'change'}],
        //   douyinSellStatus: [{required: true,message: "请选择",trigger: 'change'}],
        },
      };
    },
    created() {
      if(this.isBatch){
        this.title = "批量操作上下架"
      }else{
        this.title = "操作上下架"
        this.ruleForm.sellStatus = this.listItem.sellStatusValue
        this.ruleForm.douyinSellStatus = this.listItem.douyinSellStatusValue
      }
      this.ruleForm.merchantEquityIdList = this.id
      console.log('this.id',this.id)
    },
    methods: {
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      submitForm(formName) {
           this.AgreeLoading = true
            var data = {
                ...this.ruleForm
            }
            editStatus(data).then(res => {
            this.handleClose()
            this.$message.success('设置成功')
            this.$emit('success')
            this.AgreeLoading = false
            }).finally(()=>{
            this.AgreeLoading = false
            })
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select{
    width: 100%;
  }
  .button_box{
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
  </style>
  